<template>
  <div>
    <!-- <h1>hello vue</h1> -->
    <!-- 
      v-for指令
      作用：根据数据循环 生成对应的结构
      语法：
        v-for="(值变量，索引变量)  in 目标结构"
        v-for="值变量 in 目标结构"

        值变量：表示目标结构中的元素
        索引变量：表示值变量对应的下标值

      目标结构：数组、对象、数字、字符串
     -->
     <!-- 
       循环数组
       案例：把数组中的姓名循环渲染到li标签上
      -->
      <ul>
        <!--vue语法建议我们使用v-for的时候 需要和key属性一起使用
         原因：1、防止报错
               2、提高列表渲染性能 -->
        <li v-for="(val, index) in arr" :key="index"> {{ val }} --- {{ index }} </li>
      </ul>
      <ul>
        <li v-for="item in arrObj" :key="item.age"> {{item.name}} --- {{item.age}} --- {{item.gender}}  </li>
      </ul>
      <!-- 
        循环对象
        v-for="(值变量, 键变量, 索引变量) in 对象"
        键变量：指的是值变量对应的属性名

        值变量, 键变量, 索引变量 都叫临时变量
        注意：这些临时变量书写的时候不能交换位置
       -->
       <div>
         <p v-for="(item,key,index) in obj" :key="index">{{ item }} --- {{key}} --- {{ index }}</p>
       </div>
       <!-- 
         循环数字
        -->
        <div>
          <p v-for="item in 10" :key="item">{{ item }}</p>
        </div>
        <!-- 
          循环字符串
         -->
         <div> 
           <p v-for="(item,index) in msg" :key="index">{{ item }}</p>
           <!-- {{  item }} -->
          <!-- 注意：临时变量不能用在v-for范围外 -->
         </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: 'hello',
      arr: ["小名","小芳", "小红" ],
      arrObj: [
        {
          name: "小明",
          age: 12,
          gender: "男"
        },
        {
          name: "小芳",
          age: 13,
          gender: "女"
        },
      ],
      obj: {
        name: "小红",
        age: 18,
        gender: "女"
      }
    }
  }
}
</script>

<style>

</style>